<template>
  <div class="citation-box">
    <div :id="citationId"></div>
    <div v-if="noData" class='empty-node'>无引证专利</div>
  </div>
</template>

<script>
export default {
  props: {
    publicInfo: {
      type: Object
    },
    citationId: {
      type: String
    }
  },
  data() {
    return {
      noData: false,
      emptyText: '数据加载中...',
    }
  },
  methods: {
    initNode() {
      G6.registerNode(
        'centerNode',
        {
          labelPosition: 'center',
          draw(cfg, group) {
            const styles = cfg.styles
            const { labelCfg = {} } = cfg
            cfg.padding = cfg.padding || [6, 6, 6, 6]
            const keyShape = group.addShape('rect', {
              attrs: {
                ...styles,
                fill: '#4f63c8',
                width: 122,
                height: 34,
                x: -61,
                y: -18,
                radius: [17],
                cursor: 'pointer'
              },
              name: 'center-key-shape',
              draggable: true
              // must be assigned in G6 3.3 and later versions. it can be any value you want
            });
            const text = group.addShape('text', {
              attrs: {
                ...labelCfg.style,
                text: cfg.label,
                x: 0,
                y: 0,
                textAlign: 'center',
                textBaseline: 'middle',
                fill: '#fff',
                fontSize: 12,
              },
              name: 'center-text',
              draggable: true
            })

            return keyShape
          },
        },
        'rect'
      )
    },
    init() {
      
      this.emptyText = '数据加载中...'
      let globalCite = this.publicInfo.cite , citeStr = '';
      globalCite && globalCite.map(item => {
        citeStr = citeStr + ' '+ item
      })
      if(citeStr == '') {
        this.noData = true
        this.$message.warning('该专利无引证专利')
        return
      }
      this.$post(this.$Url.search.commonSearch, {
        dbid:'patent',
        eSearch: 'PNS/'+citeStr
      }).then(res => { 
        let data = res.data
        this.noData = false
        let newData = {
          id: this.publicInfo.pn,
          label: this.publicInfo.pn,
          type: 'centerNode',
          children: []
        }
        if (data) {
          let cite = []
          let ref = []

          data.cite = Array.from(new Set(globalCite))
          for (let i in data.cite) {
            cite.push({
              id: data.cite[i],
              label: data.cite[i],
              type: 'cite',
              children: []
            })
          }

          data.ref = Array.from(new Set(data.ref))
          for (let i in data.ref) {
            ref.push({
              id: data.ref[i],
              label: data.ref[i],
              type: 'ref',
              children: []
            })
          }

          newData['children'] = [...cite, ...ref]
        }
        
        this.renderTree(newData)
      }).catch(err => {})
    },
    renderTree(data) {
      let width = document.getElementById(this.citationId).scrollWidth
      let height = document.getElementById(this.citationId).scrollHeight || 500
      const graph = new G6.TreeGraph({
        container: this.citationId,
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        defaultNode: {
          size: 10,
          // anchorPoints: [
          //   [0, 0.5],
          //   [1, 0.5],
          // ],
          style: {
            fill: 'transparent',
            stroke: '#cddce2',
          },
          labelCfg: {
            style: {
              fill: '#71777a',
              fontSize: 12
            }
          }
        },
        nodeStateStyles: {
          hover: {
            stroke: '#2f41c8',
            labelCfg: {
              style: {
                color: '#2f41c8'
              }
              
            }
            
          }
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#d7d7d7',
          },
        },
        
        layout: {
          type: 'mindmap',
          direction: 'H',
          getHeight: () => {
            return 16;
          },
          getWidth: () => {
            return 16;
          },
          getVGap: () => {
            return 10;
          },
          getHGap: () => {
            return 70;
          },
          getSide: d => {
            let pos = 'left'
            if (d.data.type === 'cite') {
              pos = 'right'
            }
            
            return pos
          },
        }
      })

      graph.node(function(node) {
        let pos = 'right'
        if (node.type === 'ref') {
          pos = 'left'
        }
        return {
          label: node.id,
          labelCfg: {
            position: pos
          },
        }
        
      })

      graph.data(data)
      graph.render()
      // graph.fitView()
      graph.fitCenter()

      graph.on('node:mouseenter', evt => {
        const { item } = evt
        const model = item.getModel()
        if (model.type !== 'centerNode') {
          graph.setItemState(item, 'hover', true)
          graph.updateItem(item, {
            labelCfg: {
              style: {
                fill: '#2f41c8',
                cursor: 'pointer'
              }
            }
          })
        }
      })
      graph.on('node:mouseleave', evt => {
        const { item } = evt
        const model = item.getModel()
        if (model.type !== 'centerNode') {
          graph.setItemState(item, 'hover', false)
          graph.updateItem(item, {
            labelCfg: {
              style: {
                fill: '#71777a',
              }
            }
          })
        }
      })

      graph.on('node:click', evt => {
        const { item, target } = evt
        const model = item.getModel()
        let url = this.$router.resolve({
          name: 'DataCenterDetail',
          query: {
            pn: model.label
          }
        })
        window.open(url.href, '_blank')
      })

    }
  },
  beforeMount() {
    this.initNode()
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
    // this.init()
  }
}
</script>

<style lang="scss" scoped>
.citation-box {
  position: relative;
  width: 100%;
  height: 100%;
  .empty-text {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
  }
}
#container {
  height: calc(100% - 40px);
  margin-top: 20px;
  // height: calc(100vh - 100px - 130px)
}
.empty-node{
  text-align: center;
  line-height: 2.5rem;
  color: #757474;
  font-size: 0.16rem;
}
</style>